<template>
    <div class="app" style="position: relative;">
        <div class="logo" style="position:absolute;left:10px;top:30px;font-weight:bolder;font-size:18px">
            搜索
        </div>
        <div class="search" style="margin-top: 80px;">
            <input style="margin-left: 300px;" type="text" placeholder="输入写卡人或表白人"
                class="input input-bordered input-success w-full max-w-xs" v-model="keyword" />

            <button class="btn btn-info" style="margin-left: 200px;" @click="searchCard">查询</button>
        </div>

        <div class="content" style="margin-left:120px;margin-top:50px;width:900px;" v-if="cards.length != 0">
            <div class="overflow-y-auto overflow-x-auto" style="margin:0 auto;height:500px">
                <table class="table table-zebra">
                    <!-- head -->
                    <thead>
                        <tr>
                            <td>排序</td>
                            <th style="width:100px;">写卡人</th>
                            <th style="width:100px;">写卡对象</th>
                            <th style="width:100px;">表白内容</th>
                            <th style="width:100px;">图片</th>
                            <th style="width:100px;">点赞</th>
                            <th style="width:150px;">时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(card, index) in cards" :key="index" @click="() => $router.push('/card/' + card.Id).catch(err => { })">
                            <td>{{ index + 1 }}</td>
                            <td>{{ card.From }}</td>
                            <td>{{ card.To }}</td>
                            <td>{{ card.Body }}</td>
                            <td>
                                <div class="avatar">
                                    <div class="mask mask-squircle w-12 h-12">
                                        <img :src="card.Pic" alt="404" v-if="card.Pic" />
                                    </div>
                                </div>
                            </td>
                            <td>{{ card.Like.length }}</td>
                            <td>{{ card.Time }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>排序</td>
                            <th>写卡人</th>
                            <th>写卡对象</th>
                            <th>表白内容</th>
                            <th>图片</th>
                            <th>点赞</th>
                            <th>时间</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import { searchCardsByInfo } from '../utils/LoveOnChain'
export default {
    name: "search",
    data() {
        return {
            keyword: '', //搜索的关键词
            cards: []
        }
    },
    methods: {
        //添加搜索表白卡
        searchCard() {
            //搜索关键词不难为空
            if (this.keyword == '') {
                alert("搜索关键词不能为空");
                return;
            }
            //调用搜索函数
            searchCardsByInfo(this.keyword).then(result => {
                this.cards = result.map(card => {
                    let newCard = { ...card };
                    if (newCard.From.length > 20) {
                        newCard.From = newCard.From.slice(0, 6) + '...' + newCard.From.slice(-4);
                    }
                    if (newCard.To.length > 20) {
                        newCard.To = newCard.To.slice(0, 10) + '...' + newCard.To.slice(-7);
                    }

                    newCard.Time = new Date(newCard.Time).toLocaleString('en-US', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                    return newCard;
                });
            })
        }
    }
}
//0x9E7576c8A346D3a420fb20F49F25BFa2567eE973
</script>

<style scoped>
* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.app {
    top: 80px;
    width: 80%;
    float: right;
    height: 710px;
    overflow-y: auto;
}
</style>



            